import React, { memo, useEffect } from "react";
import {
  changeIsPlay,
  changePlayerList,
  getLyricInfo,
  getPlayerInfo,
} from "@/store/modules/playerSlice";
import {
  HeartOutlined,
  CaretRightOutlined,
  PlusSquareOutlined,
  DownloadOutlined,
  YoutubeOutlined,
} from "@ant-design/icons";
import SongTimeFormat from "@/util/SongTimeFormat";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import SongListWarrper from "./style";
const SongShowList = memo((props) => {
  const dispatch = useDispatch();
  const { data } = props;
  const navigate = useNavigate();

  const playSong = (n) => {
    if (
      playList.findIndex((item) => {
        return item.id === n.id;
      }) === -1
    ) {
      dispatch(changePlayerList(n));
    }
    dispatch(getPlayerInfo(n.id));
    dispatch(changeIsPlay(true));
    dispatch(getLyricInfo(n.id));
  };
  const { playList } = useSelector((state) => {
    return {
      playList: state.player.playerList,
    };
  });
  const goToMV = (mv) => {
    navigate("/playMV/" + mv);
  };
  const isAdd = (n) => {
    console.log(playList.findIndex((value) => value.id == n.id) !== -1);
    return;
  };
  const goToDetail = (id) => {
    navigate("/playlistDetail/" + id);
  };
  return (
    <SongListWarrper>
      <li>
        <div>歌曲</div>
        <div>歌手</div>
        <div>专辑</div>
        <div>时长</div>
      </li>
      {data?.map((n, i) => {
        return (
          <li key={i} className="songItem">
            <div className="header-part">
              &nbsp;
              <HeartOutlined
                className="heart"
                style={{
                  color:
                    playList.findIndex((value) => value.id == n.id) !== -1
                      ? "red"
                      : "",
                }}
              />
              <div className="info">&nbsp;{n?.name}</div>
              <div className="btns">
                {n.mv != 0 ? (
                  <YoutubeOutlined
                    className="mv"
                    onClick={(e) => goToMV(n.mv)}
                  />
                ) : (
                  ""
                )}
                {n?.fee == 8 ? (
                  <span className="hightSongIcon">Hi-Res</span>
                ) : (
                  ""
                )}
              </div>
              <div className="icons">
                <CaretRightOutlined
                  className="ic"
                  onClick={(e) => playSong(n)}
                />
                <PlusSquareOutlined className="ic plus" />
                <DownloadOutlined className="ic" />
              </div>
            </div>
            <div>{n?.ar[0]?.name}</div>
            <div className="zj" onClick={(e) => goToDetail(n.al.id)}>
              {n?.al?.name}
            </div>
            <div>{SongTimeFormat(n?.dt)}</div>
          </li>
        );
      })}
    </SongListWarrper>
  );
});

SongShowList.defaultProps = {
  data: [],
};

export default SongShowList;
